昨天我們學了 Flex & Grid 排版，今天讓我們學習 CSS 的核心屬性之一：display，它決定元素的「顯示方式」，為掌控排版的基礎！

display 控制元素在頁面上的呈現方式，常見問題：

1. 設了 margin 或 width，卻看起來沒有作用？
2. 元素不換行或無法水平排列？
3. inline 元素無法設定寬高?

1. 常見 display 類型

2. 範例

HTML：

<div class="block-box">Block 元素</div>
<span class="inline-box">Inline 元素</span>
<div class="inline-block-box">Inline-Block 元素</div>

CSS：

.block-box {
  display: block;
  width: 200px;
  height: 50px;
  background-color: #ffd6a5;
  margin-bottom: 10px;
}

.inline-box {
  display: inline;
  width: 200px; /* 無效 */
  height: 50px; /* 無效 */
  background-color: #caffbf;
}

.inline-block-box {
  display: inline-block;
  width: 200px;  /* 有效 */
  height: 50px;  /* 有效 */
  background-color: #9bf6ff;
  margin-left: 10px;
}

小結：
block → 自動換行，占滿整行
inline → 不能設定寬高，跟文字排在同一行
inline-block → 兼顧行內排列與可設定寬高

3. 相關屬性小補充

3-1 overflow → 控制內容超出邊界的行為

div {
  overflow: hidden; /* 隱藏超出的部分 */
}

3-2 visibility → 元素是否可見，但保留空間

.hidden {
  visibility: hidden;
}

3-3 white-space → 控制換行

nowrap-text {
  white-space: nowrap; /* 不換行 */
}

3-4 vertical-align →

　控制 inline 或 inline-block 元素垂直對齊

span {
  vertical-align: middle;
}

小結：

• 要讓 inline 元素可以設定寬高 → 改成 inline-block
• 要水平排列多個區塊 → display: flex + gap
• 暫時隱藏元素 → display: none
• 行內文字或徽章 → white-space、vertical-align 搭配使用

學習心得

在學習 display 這個 CSS 排版的基礎屬性時，發現很多以前覺得奇怪的情況，像是設定了寬高卻沒有效果，或者元素無法水平排列，有些竟然是因為沒有真正理解不同 display 型態的差別，或者用錯地方。

block、inline、inline-block 各自的特性，讓我能夠更清楚地知道該怎麼安排元素的位置。以前可能只是照抄範例，現在則是開始理解為什麼要用某種寫法。

另外，當看到 overflow、visibility、white-space、vertical-align 這些相關屬性時就好像開啟了一些「補充小技巧」，可以拿來處理實際排版遇到的細節。也發現原來有時候不是我程式碼寫錯，而是屬性本來就不支援那樣的效果。

整體來說，雖然還需要時間熟悉，但開始能把 display 當作一個系統去理解，而不是單純的選項。這種學習過程讓我覺得排版問題背後其實都有一個核心原理，只是要慢慢抓到。